<template>
    <div class="container">
            <!-- 顶部导航栏 -->
            <div class="nav-top">
                    <router-link to="/">
                    <img src="@/assets/icon/主页.png" alt="">
                    <span>首页</span>
                    </router-link>
                <span>&nbsp;&nbsp;/&nbsp;&nbsp;</span>
                    <router-link to="/search">课程搜索</router-link>
            </div>
            <!-- 分类搜索 -->
            <div class="classify-line">
                <div class="course-subject search-nav">
                        <h3 class="title">专题：</h3>
                        <div class="subject-list list">
                            <span class="subject" @click="subjectId = ''" :class="{'active':subjectId===''}">全部专题</span>
                            <span class="subject-item" v-for="item in classifyList" :key="item.subjectId" 
                            :class="{ 'active': subjectId == item.subjectId }"
                            @click="subjectId = item.subjectId">
                                {{item.subjectTitle}}
                            </span>
                        </div>
                </div>
                <div class="course-type search-nav">
                    <h3 class="title">课程类型：</h3>
                    <div class="type-list list">
                        <span class="type-item" :class="{'active':type===''}" @click="type = ''">全部类型</span>
                        <span class="type-item" :class="{'active':type==='free'}" @click="type = 'free'">免费课程</span>
                        <span class="type-item" :class="{'active':type==='boutique'}" @click="type = 'boutique'">精品课程</span>
                        <span class="type-item" :class="{'active':type==='pay'}" @click="type = 'pay'">付费课程</span>
                        <span class="type-item" :class="{'active':type==='discount'}" @click="type = 'discount'">折扣课程</span>
                    </div>
                </div>
                <div class="course-form search-nav">
                    <h3 class="title">方式：</h3>
                    <div class="form-list list">
                        <span class="form-item" :class="{'active':form===''}" @click="form = ''">全部方式</span>
                        <span class="form-item" :class="{'active':form==='live'}" @click="form = 'live'">直播课程</span>
                        <span class="form-item" :class="{'active':form==='record'}" @click="form = 'record'">录播课程</span>
                    </div>
                </div>

                <!-- 搜索结果 -->
                <div class="search-result">
                    <div >
                        <router-link v-for="item in searchResultList" :key="item.courseId"
                 :to="{
                    path: '/detail',
                    query: {
                        id: item.courseId
                    }
                }"
                target="_blank">
                        <div class="course-item">
                            <div class="course-img">
                                <img :src="item.coverFileUrl" alt="">
                            </div>
                            <div class="course-info">
                                <div class="course-title">{{item.courseTitle}}</div>
                                <div class="class-detail"> 共 {{ item.subSectionNum }} 节课| {{ item.learningNum }} 人报名 </div>
                                <div class="course-price">
                                    <span class="free-price" v-if="item.isFree == 1">免费</span>
                                    <span class="discount-price" v-else-if="item.isDiscount == 1">
                                        <span style="font-size: 16px;">￥{{ item.discountPrice }}</span>
                                        <span class="prime-price">￥{{ item.coursePrice }}</span>
                                        <span class="discount-tag">限时钜惠</span>
                                    </span>
                                    <span class="boutique-price" v-if="item.isFree != 1 && item.isDiscount != 1"
                                    style="font-size: 16px; color: red;">
                                        ￥{{ item.coursePrice }}
                                    </span>
                                </div>
                            </div>
                        </div>
                        </router-link>
                    </div>
                    
                </div>
            </div>
            <!-- 分页 -->
        <div class="pagination-container">
            <div>
                <a-pagination v-model="pageNum" :page-size-options="pageSizeOptions" show-size-changer :total="total"
                    :page-size="pageSize" @showSizeChange="onShowSizeChange">
                </a-pagination>
            </div>
        </div>
    </div>
</template>


<script>
import { getClassifyList, getSearchResult } from "@/api/request"
export default {
    name: 'SearchCom',
    data() {
        return {
            classifyList: [],
            searchResultList: [],
            pageNum: 1,
            pageSize: 15,
            courseId: '',
            subjectId: '',
            type: '',
            keyword: '',
            current: 1,
            pageSizeOptions: ['5', '15', '30'],
            total: 100,
            form: '',

        }
    },

    created() {
        //获取分类列表
        getClassifyList().then((result) => {
            this.classifyList = result.rows;
            console.log('getClassifyList search com', this.classifyList);
        }).catch((err) => {
            console.log(err);
        });

        this.subjectId = this.$route.query.subjectId || '';
        this.keyword = this.$route.query.keyword || '';
        this.form = this.$route.query.form || '';
        this.type = this.$route.query.type || '';
        console.log('this.query', this.$route.query);
        // 搜索结果
        getSearchResult(this.pageNum, this.pageSize, this.type, this.subjectId, this.keyword, this.form).then((result) => {
            this.searchResultList = result.courseList;
            this.total = result.total;
            console.log('getSearchResult search com', result);
        }).catch((err) => {
            console.log(err);
        });
    },
    mounted() {

    },
    methods: {
        // 跳转课程详情
        toCourseDetail(courseId) {
            this.$router.push({
                path: 'detail',
                query: {
                    courseId: courseId
                }
            })
        },
        //跳转，并刷新搜索结果
        updateSearchResult() {
            getSearchResult(this.pageNum, this.pageSize, this.type, this.subjectId, this.keyword, this.form).then((result) => {
                this.searchResultList = result.courseList;
                this.total = result.total;
                console.log('getSearchResult search com', result);
            }).catch((err) => {
                console.log(err);
            });
        },
        
        //pageSize 变化的回调
        onShowSizeChange(current, pageSize) {
            this.curren = current;
            this.pageNum = current;
            this.pageSize = pageSize;
            console.log('onShowSizeChange');
            this.onlyReFlashSearchResult();
        }


    },
    watch: {
        //检测路由参数的变化，若变化，则刷新搜索结果
        pageNum: {
            handler() {
                this.updateSearchResult()
            }
        },
        pageSize: {
            handler() {
                this.updateSearchResult()
            }
        },
        type: {
            handler() {

                this.updateSearchResult()
            }
        },
        subjectId: {
            handler() {
                this.updateSearchResult()
            }
        },
        courseType: {
            handler() {
                this.updateSearchResult()
            }
        },
        keyword: {
            handler() {
                if (this.$route.path === '/search')
                    this.onlyReFlashSearchResult;
                this.updateSearchResult()
            }
        },
        '$route.query.keyword': {
            handler(newKeyword) {
                this.keyword = newKeyword; // 同步到组件内部数据
                this.updateSearchResult();
            },
            immediate: true // 立即执行一次，处理初始值
        },
        '$route.query.subjectId': {
            handler(newSubjectId) {

                this.subjectId = newSubjectId; // 同步到组件内部数据
                this.updateSearchResult();
            },
            immediate: true // 立即执行一次，处理初始值
        },
        current: {
            handler(current) {
                // console.log('watch current', current);
                this.current = current;
                this.pageNum = current;
            },
            immediate: true
        }

    }
}
</script>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
a {
    text-decoration: none;
    &:link,
    &:visited,
    &:hover,
    &active {
        color: inherit;
    }
}

ul>li {
    list-style: none;
}

.container {
    width: 1200px;
    margin: 0 auto;
}

.nav-top {
    margin-top: 40px;
    font-size: 16px;
    >div {
        display: inline-block;
        padding: 10px 30px 10px 0;
    }
    img{
        width: 16px;
        margin-top: -5px;
    }
}

.classify-line {
    >.search-nav{
            padding: 10px;
            background: #f4f4f4;
            .list{
                margin-left: 50px;
            }
            h3{
                white-space: nowrap;
                display: inline-block;
                width: 50px;
                line-height: 35px;
                color: rgba(0, 0, 0, .5);
            }
    }
    >div {
        margin: 20px 0;
        line-height: 35px;
        display: flex;
        align-items: center;
        
        span {
            padding: 0 10px;
            white-space: nowrap;
            // margin: 10px 0;
            display: inline-block;
            height: 35px;
            line-height: 35px;
            font-size: 14px;
            box-sizing: border-box;

            &:hover {
                cursor: pointer;
            }
        }
    }
}

.active {
    color: #fff;
    background-color: rgb(0, 207, 140);
    height: 35px;
    line-height: 35px;
}

.search-result {
        width: 1200px;
        flex-wrap: wrap;// 换行
        margin: auto;
        
        .course-item{
                float: left;
                width: 240px;
                position: relative;
                border-radius: 3px;
                overflow: hidden;
                padding: 7px 7px 10px;
                margin-bottom: 20px;
                cursor: pointer;
                
                /*  */
                
                &:hover{
                    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                }
                .course-img{
                    border-radius: 10px;
                    width: 100%;
                    padding-top: 55%;
                    position: relative;
                    border-radius: 10px 10px 0 0;
                    img{
                        border-radius: 10px;
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }
                .course-info{
                    padding: 10px;
                    .course-title{
                        font-size: 15px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        color: black;
                        font-weight: 500;
                        &:hover{
                            color: #00cf8c;
                        }
                    }
                    .class-detail{
                        font-size: 14px;
                        color: #b7bbc4;
                        height: 22px;
                    }
                    .course-price{
                        font-size: 16px;
                        font-weight: 500;
                        height: 22px;
                        span{
                            
                            padding: 0px;
                            margin-right: 10px;
                        }
                        .free-price{
                            font-size: 16px;
                            color: #00cf8c;
                        }
                        .discount-price{
                            font-size: 16px;
                            color: #ff6600;
                            .prime-price{
                                font-size: 12px;
                                /* 删除线 */
                                text-decoration: line-through;
                                color: #b7bbc4;
                            }
                            .discount-tag{
                                width: 63px;
                                height: 22px;
                                line-height: 22px;
                                text-align: center;
                                font-size: 11px;
                                color: #fa8c16;
                                background: #fff7e6;
                                border: 1px solid #f4b859;
                            }
                        }
                    }
                }
        }

    

}

.pagination-container {
    display: flex;
    justify-content: center;
}
.no-search-result-box{
    width: 1200px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    >div{
        text-align: center;
        font-size: 20px;
        
    }
}
</style>